今天是第十五天我們可以寫一個多隻斑馬魚的使用者介面,以下是程式碼
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YOLO 和 LSTM 網頁界面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>YOLO 和 LSTM 網頁界面</h1>
<div class="file-input">
<label for="file">Select Image/Video:</label>
<input type="file" id="file" accept=".gif">
</div>
<button id="yolo-button">YOLO 辨識結果</button>
<div id="image-container"></div>
<div id="buttons-container" style="display: none;">
<button id="zebrafish-video">斑馬魚運動軌跡影片</button>
<button id="normal-behavior">正常佔比</button>
<button id="fear-behavior">害怕佔比</button>
<button id="anxiety-behavior">焦慮佔比</button>
<button id="depression-behavior">壓抑佔比</button>
<button id="download-video">下載影片</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
css部分
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.file-input {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#image-container img {
max-width: 100%;
margin-top: 20px;
}
#buttons-container {
margin-top: 20px;
text-align: center; /* 使按鈕區域內的按鈕居中對齊 */
}
#buttons-container button {
display: inline-block;
margin: 10px 5px; /* 調整按鈕間距 */
width: 45%; /* 每個按鈕寬度調整為父容器的45%,使每行最多容納兩個按鈕 */
box-sizing: border-box; /* 包括內邊距和邊框在內的總寬度計算 */
}
javascript部分
document.getElementById('yolo-button').addEventListener('click', function () {
const fileInput = document.getElementById('file');
if (fileInput.files.length === 0) {
// 如果沒有選擇圖片文件,仍然顯示功能按鈕
document.getElementById('buttons-container').style.display = 'block';
return;
}
const file = fileInput.files[0];
// 假設這裡有 YOLO 計算邏輯
// 目前只展示圖片
const reader = new FileReader();
reader.onload = function (e) {
const imageContainer = document.getElementById('image-container');
const img = document.createElement('img');
img.src = e.target.result;
imageContainer.innerHTML = '';
imageContainer.appendChild(img);
// 顯示四個功能按鈕
document.getElementById('buttons-container').style.display = 'block';
};
reader.readAsDataURL(file);
// 顯示功能按鈕
document.getElementById('buttons-container').style.display = 'block';
});
document.getElementById('zebrafish-video').addEventListener('click', function () {
// 播放斑馬魚運動軌跡影片的邏輯
console.log('斑馬魚運動軌跡影片');
});
document.getElementById('normal-behavior').addEventListener('click', function () {
// 顯示正常佔比的邏輯
console.log('斑馬魚行為 (正常佔比)');
});
document.getElementById('fear-behavior').addEventListener('click', function () {
// 顯示害怕佔比的邏輯
console.log('斑馬魚行為 (害怕佔比)');
});
document.getElementById('anxiety-behavior').addEventListener('click', function () {
// 顯示焦慮佔比的邏輯
console.log('斑馬魚行為 (焦慮佔比)');
});
document.getElementById('depression-behavior').addEventListener('click', function () {
// 顯示壓抑佔比的邏輯
console.log('斑馬魚行為 (壓抑佔比)');
});
document.getElementById('download-video').addEventListener('click', function () {
// 下載影片的邏輯
console.log('下載影片');
// 這裡假設有一個已處理好的影片文件
const link = document.createElement('a');
link.href = 'path/to/your/video.mp4'; // 替換為實際的影片文件路徑
link.download = 'video.mp4';
link.click();
});
這些段程式碼建立了一個網頁應用程式,結合了YOLO和LSTM模型,用來辨識上傳的影像或影片,並分析斑馬魚的行為。
這個檔案定義了網頁的基本結構,包括標題、樣式表連結、以及主要的互動元件。
<div class="container">
: 包含了整個網頁的主要內容,包括標題、檔案上傳區域、辨識按鈕和功能按鈕區域。<input type="file">
) 選擇要辨識的影像或影片。這個檔案控制了網頁的外觀和佈局,讓應用程式看起來更美觀。
這個檔案包含了所有的JavaScript邏輯,負責管理用戶互動和功能的觸發。
YOLO 辨識結果按鈕 (yolo-button
):
FileReader
將上傳的檔案讀入並顯示在頁面上。斑馬魚運動軌跡影片 (zebrafish-video
):
斑馬魚行為分析:
下載影片 (download-video
):
這個網頁應用程式提供了一個直觀且簡單的介面,讓用戶可以輕鬆上傳影像或影片,進行YOLO辨識,並進一步分析斑馬魚的行為,讓使用者很容易上手做斑馬魚行為分析。